<%
var containerParam = {
	title: '我的素材',
	currentMenu: 'myItem',
	styleArray: [ctxPath + '/css/myItem/list.css'],
	jsArray: [
		'https://cdn.bootcss.com/pako/1.0.10/pako.min.js',
		ctxPath + '/widgets/echarts/echarts.min.js',
		ctxPath + '/js/myItem/list.js'
	],
	breadcrumbMap: {
		'首页': ctxPath + '/',
		'我的素材': null
	}
};
layout('/common/_website_container.html', containerParam){
%>
<div class="layui-row layui-col-space15">
	<div class="layui-col-md8">
	
		<div class="layui-card">
			<div class="layui-card-header">统计图表</div>
			<div class="layui-card-body">
				<div id="chart"></div>
			</div>
		</div>
	
		<div class="layui-card">
			<div class="layui-card-header">QP</div>
			<div class="layui-card-body">
				<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
					<thead>
						<tr>
							<th class="hide" lay-data="{field: 'id', hide: true}"></th>
							<th lay-data="{field: 'item', minWidth: 140}"></th>
							<th lay-data="{field: 'used'}">已用</th>
							<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
							<th lay-data="{field: 'totalNeed'}">总需</th>
							<th lay-data="{field: 'stillNeed'}">仍需</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="hide">0</td>
							<td><div class="item"><img src="${ctxPath}/img/QP.jpg" alt="QP"> QP</div></td>
							<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedQp))}">${usedQp.number}</a></td>
							<td>${hold[parseLong(0)]}</td>
							<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedQp))}">${totalNeedQp.number}</a></td>
							<td><% if (!isEmpty(hold[parseLong(0)])) { if (hold[parseLong(0)] < totalNeedQp.number) { %>${totalNeedQp.number - hold[parseLong(0)]}<% } else { %>0<% } } %></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="layui-card">
			<div class="layui-card-header">铜素材</div>
			<div class="layui-card-body">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md6">
						<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
							<thead>
								<tr>
									<th class="hide" lay-data="{field: 'id', hide: true}"></th>
									<th lay-data="{field: 'item', minWidth: 140}"></th>
									<th lay-data="{field: 'used'}">已用</th>
									<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
									<th lay-data="{field: 'totalNeed'}">总需</th>
									<th lay-data="{field: 'stillNeed'}">仍需</th>
								</tr>
							</thead>
							<tbody>
								<% for (item in array.range(bronzes, 0, @NumberUtils.divideRoundUp(bronzes.~size, 2))) { %>
								<tr>
									<td class="hide">${item.id}</td>
									<td><div class="item"><img src="${ctxPath}/image/${item.image!}?pixel=40" alt="${item.name}"> ${item.name}</div></td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedItem[item.id]))}">${usedItem[item.id].number}</a></td>
									<td>${hold[item.id]}</td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedItem[item.id]))}">${totalNeedItem[item.id].number}</a></td>
									<td><% if (!isEmpty(hold[item.id])) { if (hold[item.id] < totalNeedItem[item.id].number) { %>${totalNeedItem[item.id].number - hold[item.id]}<% } else { %>0<% } } %></td>
								</tr>
								<% } %>
							</tbody>
						</table>
					</div>
					<div class="layui-col-md6">
						<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
							<thead>
								<tr>
									<th class="hide" lay-data="{field: 'id', hide: true}"></th>
									<th lay-data="{field: 'item', minWidth: 140}"></th>
									<th lay-data="{field: 'used'}">已用</th>
									<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
									<th lay-data="{field: 'totalNeed'}">总需</th>
									<th lay-data="{field: 'stillNeed'}">仍需</th>
								</tr>
							</thead>
							<tbody>
								<% for (item in array.range(bronzes, @NumberUtils.divideRoundUp(bronzes.~size, 2), bronzes.~size)) { %>
								<tr>
									<td class="hide">${item.id}</td>
									<td><div class="item"><img src="${ctxPath}/image/${item.image!}?pixel=40" alt="${item.name}"> ${item.name}</div></td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedItem[item.id]))}">${usedItem[item.id].number}</a></td>
									<td>${hold[item.id]}</td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedItem[item.id]))}">${totalNeedItem[item.id].number}</a></td>
									<td><% if (!isEmpty(hold[item.id])) { if (hold[item.id] < totalNeedItem[item.id].number) { %>${totalNeedItem[item.id].number - hold[item.id]}<% } else { %>0<% } } %></td>
								</tr>
								<% } %>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-card">
			<div class="layui-card-header">银素材</div>
			<div class="layui-card-body">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md6">
						<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
							<thead>
								<tr>
									<th class="hide" lay-data="{field: 'id', hide: true}"></th>
									<th lay-data="{field: 'item', minWidth: 140}"></th>
									<th lay-data="{field: 'used'}">已用</th>
									<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
									<th lay-data="{field: 'totalNeed'}">总需</th>
									<th lay-data="{field: 'stillNeed'}">仍需</th>
								</tr>
							</thead>
							<tbody>
								<% for (item in array.range(silvers, 0, @NumberUtils.divideRoundUp(silvers.~size, 2))) { %>
								<tr>
									<td class="hide">${item.id}</td>
									<td><div class="item"><img src="${ctxPath}/image/${item.image!}?pixel=40" alt="${item.name}"> ${item.name}</div></td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedItem[item.id]))}">${usedItem[item.id].number}</a></td>
									<td>${hold[item.id]}</td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedItem[item.id]))}">${totalNeedItem[item.id].number}</a></td>
									<td><% if (!isEmpty(hold[item.id])) { if (hold[item.id] < totalNeedItem[item.id].number) { %>${totalNeedItem[item.id].number - hold[item.id]}<% } else { %>0<% } } %></td>
								</tr>
								<% } %>
							</tbody>
						</table>
					</div>
					<div class="layui-col-md6">
						<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
							<thead>
								<tr>
									<th class="hide" lay-data="{field: 'id', hide: true}"></th>
									<th lay-data="{field: 'item', minWidth: 140}"></th>
									<th lay-data="{field: 'used'}">已用</th>
									<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
									<th lay-data="{field: 'totalNeed'}">总需</th>
									<th lay-data="{field: 'stillNeed'}">仍需</th>
								</tr>
							</thead>
							<tbody>
								<% for (item in array.range(silvers, @NumberUtils.divideRoundUp(silvers.~size, 2), silvers.~size)) { %>
								<tr>
									<td class="hide">${item.id}</td>
									<td><div class="item"><img src="${ctxPath}/image/${item.image!}?pixel=40" alt="${item.name}"> ${item.name}</div></td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedItem[item.id]))}">${usedItem[item.id].number}</a></td>
									<td>${hold[item.id]}</td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedItem[item.id]))}">${totalNeedItem[item.id].number}</a></td>
									<td><% if (!isEmpty(hold[item.id])) { if (hold[item.id] < totalNeedItem[item.id].number) { %>${totalNeedItem[item.id].number - hold[item.id]}<% } else { %>0<% } } %></td>
								</tr>
								<% } %>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-card">
			<div class="layui-card-header">金素材</div>
			<div class="layui-card-body">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md6">
						<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
							<thead>
								<tr>
									<th class="hide" class="hide" lay-data="{field: 'id', hide: true}"></th>
									<th lay-data="{field: 'item', minWidth: 140}"></th>
									<th lay-data="{field: 'used'}">已用</th>
									<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
									<th lay-data="{field: 'totalNeed'}">总需</th>
									<th lay-data="{field: 'stillNeed'}">仍需</th>
								</tr>
							</thead>
							<tbody>
								<% for (item in array.range(golds, 0, @NumberUtils.divideRoundUp(golds.~size, 2))) { %>
								<tr>
									<td class="hide">${item.id}</td>
									<td><div class="item"><img src="${ctxPath}/image/${item.image!}?pixel=40" alt="${item.name}"> ${item.name}</div></td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedItem[item.id]))}">${usedItem[item.id].number}</a></td>
									<td>${hold[item.id]}</td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedItem[item.id]))}">${totalNeedItem[item.id].number}</a></td>
									<td><% if (!isEmpty(hold[item.id])) { if (hold[item.id] < totalNeedItem[item.id].number) { %>${totalNeedItem[item.id].number - hold[item.id]}<% } else { %>0<% } } %></td>
								</tr>
								<% } %>
							</tbody>
						</table>
					</div>
					<div class="layui-col-md6">
						<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
							<thead>
								<tr>
									<th class="hide" lay-data="{field: 'id', hide: true}"></th>
									<th lay-data="{field: 'item', minWidth: 140}"></th>
									<th lay-data="{field: 'used'}">已用</th>
									<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
									<th lay-data="{field: 'totalNeed'}">总需</th>
									<th lay-data="{field: 'stillNeed'}">仍需</th>
								</tr>
							</thead>
							<tbody>
								<% for (item in array.range(golds, @NumberUtils.divideRoundUp(golds.~size, 2), golds.~size)) { %>
								<tr>
									<td class="hide">${item.id}</td>
									<td><div class="item"><img src="${ctxPath}/image/${item.image!}?pixel=40" alt="${item.name}"> ${item.name}</div></td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedItem[item.id]))}">${usedItem[item.id].number}</a></td>
									<td>${hold[item.id]}</td>
									<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedItem[item.id]))}">${totalNeedItem[item.id].number}</a></td>
									<td><% if (!isEmpty(hold[item.id])) { if (hold[item.id] < totalNeedItem[item.id].number) { %>${totalNeedItem[item.id].number - hold[item.id]}<% } else { %>0<% } } %></td>
								</tr>
								<% } %>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>

	</div>
	<div class="layui-col-md4">

		<div class="layui-card">
			<div class="layui-card-header">棋子&结晶</div>
			<div class="layui-card-body">
				<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
					<thead>
						<tr>
							<th class="hide" lay-data="{field: 'id', hide: true}"></th>
							<th lay-data="{field: 'item', minWidth: 140}"></th>
							<th lay-data="{field: 'used'}">已用</th>
							<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
							<th lay-data="{field: 'totalNeed'}">总需</th>
							<th lay-data="{field: 'stillNeed'}">仍需</th>
						</tr>
					</thead>
					<tbody>
						<% for (item in pieces) { %>
						<tr>
							<td class="hide">${item.id}</td>
							<td><div class="item"><img src="${ctxPath}/image/${item.image!}?pixel=40" alt="${item.name}"> ${item.name}</div></td>
							<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedItem[item.id]))}">${usedItem[item.id].number}</a></td>
							<td>${hold[item.id]}</td>
							<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedItem[item.id]))}">${totalNeedItem[item.id].number}</a></td>
							<td><% if (!isEmpty(hold[item.id])) { if (hold[item.id] < totalNeedItem[item.id].number) { %>${totalNeedItem[item.id].number - hold[item.id]}<% } else { %>0<% } } %></td>
						</tr>
						<% } %>
					</tbody>
				</table>
			</div>
		</div>

		<div class="layui-card">
			<div class="layui-card-header">技能石</div>
			<div class="layui-card-body">
				<table class="layui-table" lay-skin="line" lay-size="sm" lay-filter="table">
					<thead>
						<tr>
							<th class="hide" lay-data="{field: 'id', hide: true}"></th>
							<th lay-data="{field: 'item', minWidth: 140}"></th>
							<th lay-data="{field: 'used'}">已用</th>
							<th lay-data="{field: 'hold', edit: 'text'}">持有</th>
							<th lay-data="{field: 'totalNeed'}">总需</th>
							<th lay-data="{field: 'stillNeed'}">仍需</th>
						</tr>
					</thead>
					<tbody>
						<% for (item in biscuits) { %>
						<tr>
							<td class="hide">${item.id}</td>
							<td><div class="item"><img src="${ctxPath}/image/${item.image!}?pixel=40" alt="${item.name}"> ${item.name}</div></td>
							<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(usedItem[item.id]))}">${usedItem[item.id].number}</a></td>
							<td>${hold[item.id]}</td>
							<td><a class="show-data" href="javascript:void(0)" data-data="${@StringUtils.zip(@StringUtils.toJson(totalNeedItem[item.id]))}">${totalNeedItem[item.id].number}</a></td>
							<td><% if (!isEmpty(hold[item.id])) { if (hold[item.id] < totalNeedItem[item.id].number) { %>${totalNeedItem[item.id].number - hold[item.id]}<% } else { %>0<% } } %></td>
						</tr>
						<% } %>
					</tbody>
				</table>
			</div>
		</div>

	</div>
</div>

<!-- 底部栏 start -->
<% layout('/common/_website_footer.html'){} %>
<!-- 底部栏 end -->

<script id="showDataDetailTpl" type="text/html">
	<table class="layui-table margin-0" lay-skin="line" lay-size="sm">
		<tbody>
			{{# layui.jquery.each(d, function() { }}
			<tr>
				<td><img class="margin-right-5" src="${ctxPath}/image/{{this.avatar}}?pixel=30" alt="{{this.name}}">{{this.number}}</td>
				<td class="text-right">
				{{# layui.jquery.each(this.detail, function() { }}
				&nbsp;{{this.name}} {{this.number}}
				{{# }); }}
				</td>
			</tr>
			{{# }); }}
		</tbody>
	</table>
</script>
<% } %>
